<template>
  <div class="app-container">
    <el-container>
      <!-- 头部导航 -->
      <el-header height="60px">
        <div class="header-logo">
          <img src="../assets/Logo.png" alt="Logo" class="logo-image" />
          <h1>一杆云枢</h1>
        </div>
        <div class="header-menu">
          <el-menu
            :default-active="activeIndex"
            mode="horizontal"
            router
            background-color="#409eff"
            text-color="#fff"
            active-text-color="#ffd04b"
          >
            <el-menu-item index="/home">首页</el-menu-item>
            <el-menu-item index="/booking">预订台球桌</el-menu-item>
            <el-menu-item index="/orders">我的订单</el-menu-item>
            <el-menu-item index="/recharge">账户充值</el-menu-item>
          </el-menu>
        </div>
        <div class="header-user">
          <template v-if="userStore.isLoggedIn">
            <el-dropdown trigger="click" @command="handleCommand">
              <span class="user-dropdown">
                {{ userStore.userInfo.username }}
                <el-icon><arrow-down /></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="profile">个人中心</el-dropdown-item>
                  <el-dropdown-item v-if="userStore.isAdmin" command="admin">管理后台</el-dropdown-item>
                  <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
          <template v-else>
            <el-button link @click="$router.push('/login')">登录</el-button>
            <el-button link @click="$router.push('/register')">注册</el-button>
          </template>
        </div>
      </el-header>
      
      <!-- 主体内容 -->
      <el-main>
        <router-view />
      </el-main>
      
      <!-- 底部信息 -->
      <el-footer height="60px">
        <div class="footer-content">
          <p>© 2023 台球吧管理系统 版权所有</p>
          <p>联系电话: 123-4567-8910 | 地址: 某某市某某区某某街123号</p>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import { ref, computed, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useUserStore } from '../store/modules/user';
import { ArrowDown } from '@element-plus/icons-vue';

export default {
  name: 'AppLayout',
  
  components: {
    ArrowDown
  },
  
  setup() {
    const route = useRoute();
    const router = useRouter();
    const userStore = useUserStore();
    
    // 当前激活的菜单项
    const activeIndex = ref('/home');
    
    // 监听路由变化，更新activeIndex
    watch(
      () => route.path,
      (path) => {
        activeIndex.value = path;
      },
      { immediate: true }
    );
    
    // 处理用户下拉菜单命令
    const handleCommand = (command) => {
      switch (command) {
        case 'profile':
          router.push('/profile');
          break;
        case 'admin':
          router.push('/admin');
          break;
        case 'logout':
          userStore.logout();
          router.push('/login');
          break;
      }
    };
    
    return {
      activeIndex,
      userStore,
      handleCommand
    };
  }
};
</script>

<style scoped>
.app-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.el-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.el-header {
  background-color: #409eff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.header-logo {
  display: flex;
  align-items: center;
}

.logo-image {
  height: 40px;
  margin-right: 10px;
}

.header-logo h1 {
  font-size: 18px;
  margin: 0;
}

.header-menu {
  flex: 1;
  margin: 0 20px;
}

.header-user {
  display: flex;
  align-items: center;
}

.user-dropdown {
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.el-main {
  padding: 20px;
  flex: 1;
}

.el-footer {
  background-color: #f5f7fa;
  color: #606266;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
}

.footer-content p {
  margin: 5px 0;
  font-size: 14px;
}
</style> 